<template>
    <app-layout>
        <view class="summary" :style="{minHeight: `calc(100vh - ${navHeight || '0px'})`}">
            <app-nav-bar v-if="navbarStatus"
                         title="店铺印象"
                         :fixed="true"
                         :has-height="false"
                         has-mall-setting="0"
                         :back-color="scrollTop > 10 ? 'black' :'white'"
                         :color="scrollTop > 10 ? '#353535' :'white'"
                         :background-color="scrollTop > 10 ? 'white' :'rgba(0,0,0,0)'"
            ></app-nav-bar>
            <view :style="[bgStyle]"></view>
            <template v-if="data.basic_style == 1">
                <view :style="[logoStyle]"></view>
                <view :style="{paddingTop: `calc(${data.card_top}rpx  + 3rpx + ${data.shop_logo_size / 2}rpx)`}"
                      class="shop-pos">
                    <view :style="[boxStyle]" class="dir-top-nowrap">
                        <view class="dir-top-nowrap cross-center">
                            <view class="summary-name" :style="{color: data.shop_title_color,fontSize: `${data.shop_logo_font}rpx`}">{{ mchData.name }}</view>
                        </view>
                        <view class="dir-top-nowrap center">
                            <view class="dir-left-nowrap cross-center" :style="{marginBottom: `${data.card_padding}rpx`}">
                                <view class="box-grow-0" :style="[sLabelStyle]">主营内容</view>
                                <view :style="[sValueStyle]">{{ mchData.scope }}</view>
                            </view>
                            <view class="dir-left-nowrap cross-center" :style="{marginBottom: `${data.card_padding}rpx`}">
                                <view class="box-grow-0" :style="[sLabelStyle]">店铺简介</view>
                                <view :style="[sValueStyle]">{{ mchData.description }}</view>
                            </view>
                            <view class="dir-left-nowrap cross-center" :style="{marginBottom: `${data.card_padding}rpx`}">
                                <view class="box-grow-0" :style="[sLabelStyle]">营业时间</view>
                                <view :style="[sValueStyle]">{{ mchData.business_hours }}</view>
                            </view>
                            <view v-if="data.has_shop_phone == 1" class="dir-left-nowrap cross-center" :style="{marginBottom: `${data.card_padding}rpx`}">
                                <view class="box-grow-0 cross-center" style="min-height: 48rpx;align-self: flex-start">
                                     <view :style="[sLabelStyle,{alignSelf: 'auto !important'}]">联系电话</view>
                                </view>
                                <view :style="[sValueStyle]">{{ mchData.mobile }}</view>
                                <view class="shop-phone"  style="line-height: 1" @click="callPhone"></view>
                            </view>
                            <view class="dir-left-nowrap cross-center">
                                <view class="box-grow-0 cross-center" style="min-height: 28rpx;align-self: flex-start">
                                     <view :style="[sLabelStyle,{alignSelf: 'auto !important'}]">店铺地址</view>
                                </view>
                                <view :style="[sValueStyle]" class="box-grow-1" @click="mapPower">
                                    {{ mchData.address }}
                                </view>
                                <view class="box-grow-0" style="line-height: 1" @click="mapPower">
                                    <image style="height:28rpx;width:18rpx" class="arrow"
                                           src="/static/image/icon/arrow-right.png"
                                    ></image>
                                </view>
                            </view>
                            <view class="map">
                                <!-- #ifndef MP-BAIDU -->
                                <map :markers="markers"
                                     :latitude="mchData.latitude" :longitude="mchData.longitude"
                                     class="map"></map>
                                <!-- #endif -->
                                <!-- #ifdef MP-BAIDU -->
                                <map :markers="markers"
                                     v-show="isKfShow == false"
                                     :latitude="mchData.latitude" :longitude="mchData.longitude"
                                     class="map"></map>
                                <!-- #endif -->
                            </view>
                        </view>
                    </view>

                    <view v-if="data.has_contact_customer == 1"
                          :style="[btnStyle]" class="main-center cross-center"
                          @click="isKfShow = true">
                        联系客服
                    </view>
                </view>
            </template>
            <template v-if="data.basic_style == 2">
                <view :style="{paddingTop: `${data.card_top}rpx`}" class="shop-pos">
                    <view :style="{margin: `0 ${data.card_left_right}rpx`}">
                        <view class="shop-style2 dir-left-nowrap cross-center" :style="{borderRadius: `${data.card_radius}rpx`}">
                            <image :src="mchData.cover_url" class="box-grow-0"
                                   :style="{borderRadius: `${data.shop_logo_radius}rpx`,height: `calc(${data.shop_logo_size}rpx + 6rpx)`,width: `calc(${data.shop_logo_size}rpx + 6rpx)`}"
                                  ></image>
                            <view style="margin-left:20rpx" class="dir-top-nowrap">
                                <view class="summary-name"
                                      :style="{color: data.shop_title_color,fontSize: `${data.shop_logo_font}rpx`}">
                                    {{ mchData.name }}
                                </view>
                                <view :style="[sValueStyle]">{{ mchData.description }}</view>
                            </view>
                        </view>
                        <view class="shop-style2"
                              :style="{marginTop: `${data.card_padding}rpx`, borderRadius: `${data.card_radius}rpx`}">
                            <view class="dir-left-nowrap cross-center" style="margin-bottom: 30rpx">
                                <view class="box-grow-0" :style="[sLabelStyle]">主营内容</view>
                                <view :style="[sValueStyle]">{{ mchData.scope }}</view>
                            </view>
                            <view class="dir-left-nowrap cross-center">
                                <view class="box-grow-0" :style="[sLabelStyle]">营业时间</view>
                                <view :style="[sValueStyle]">{{ mchData.business_hours }}</view>
                            </view>
                        </view>
                        <view class="shop-style2" v-if="data.has_shop_phone == 1"
                              :style="{marginTop: `${data.card_padding}rpx`, borderRadius: `${data.card_radius}rpx`}">
                            <view class="dir-left-nowrap cross-center">
                                <view class="box-grow-0 cross-center" style="min-height: 48rpx;align-self: flex-start">
                                    <view :style="[sLabelStyle,{alignSelf: 'auto !important'}]">联系电话</view>
                                    </view>
                                <view :style="[sValueStyle]">{{ mchData.mobile }}</view>
                                <view class="shop-phone" style="line-height: 1" @click="callPhone"></view>
                            </view>
                        </view>
                        <view class="shop-style2" :style="{marginTop: `${data.card_padding}rpx`, borderRadius: `${data.card_radius}rpx`}">
                            <view class="dir-left-nowrap cross-center">
                                <view class="box-grow-0 cross-center" style="min-height: 28rpx;align-self: flex-start">
                                     <view :style="[sLabelStyle,{alignSelf: 'auto !important'}]">店铺地址</view>
                                </view>
                                <view :style="[sValueStyle]" class="box-grow-1" @click="mapPower">
                                    {{ mchData.address }}
                                </view>
                                <view class="box-grow-0" style="line-height: 1" @click="mapPower">
                                    <image style="height:28rpx;width:18rpx" class="arrow"
                                           src="/static/image/icon/arrow-right.png"></image>
                                </view>
                            </view>
                            <view style="margin-top: 24rpx">
                                <map :markers="markers"
                                     :latitude="mchData.latitude" :longitude="mchData.longitude"
                                     class="map"></map>
                            </view>
                        </view>
                    </view>
                    <view v-if="data.has_contact_customer == 1" class="main-center cross-center"
                          :style="[btnStyle]" @click="isKfShow = true">
                        联系客服
                    </view>
                </view>
            </template>
            <mch-customer v-model="isKfShow" :mch-data="mchData" :info-data="data"></mch-customer>
            <mch-navbar v-if="mch_id" :mchId="mch_id" @setHeight="setHeight"></mch-navbar>
        </view>
    </app-layout>
</template>

<script>
import mchNavbar from '../mch-navbar'
import mchCustomer from '../mch-customer'
import {mapGetters, mapState} from "vuex";
import appNavBar from "../../../components/page-component/index/app-nav-bar";

export default {
    name: "summary",
    components: {
        mchNavbar,
        mchCustomer,
        appNavBar
    },
    computed: {
        ...mapState({
            systemInfo: state => state.gConfig.systemInfo
        }),
        navbarStatus: function () {
            // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO
            return ['windows', 'mac'].indexOf(this.systemInfo.platform) === -1;
            // #endif
            // #ifdef H5
            return !this.$jwx.isWechat();
            // #endif
            // #ifdef MP-ALIPAY
            return false;
            // #endif
        },
        bgStyle() {
            let {
                bg_color,
                has_bg,
                bg_pic,
                bg_style,
                basic_style,
            } = this.data;
            let style = {
                position: 'absolute',
                top: 0,
                width: '100%',
                backgroundColor: bg_color,
            };
            if (has_bg == 1) {
                Object.assign(style, {
                    backgroundImage: `url('${bg_pic}')`,
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: '100% 100%',
                })
            }
            if (bg_style === 'top' || basic_style == 2 || has_bg == 0) {
                Object.assign(style, {
                    height: '360rpx',
                    borderBottomRightRadius: '200rem 100px',
                    borderBottomLeftRadius: '200rem 100px',
                })
            } else {
                Object.assign(style, {minHeight: `calc(100vh - (55px + env(safe-area-inset-bottom)))`, height: 'inherit'})
            }
            return style;
        },

        logoStyle() {
            let {
                shop_logo_size, shop_logo_radius, card_top
            } = this.data;
            return {
                position: 'absolute',
                height: `calc(${shop_logo_size}rpx + 6rpx)`,
                width: `calc(${shop_logo_size}rpx + 6rpx)`,
                borderRadius: `${shop_logo_radius}rpx`,
                backgroundImage: `url('${this.mchData.cover_url}')`,
                backgroundRepeat: 'no-repeat',
                backgroundSize: '100% 100%',
                border: '6rpx solid white',
                zIndex: 3,
                top: `${card_top}rpx`,
                left: `calc(50vw - ${shop_logo_size / 2}rpx - 3rpx)`
            }
        },
        boxStyle() {
            let {
                card_left_right,
                card_radius,
                shop_logo_size,
            } = this.data;
            return {
                margin: `0 ${card_left_right}rpx`,
                padding: `${shop_logo_size / 2 + 3}rpx 24rpx 0`,
                background: 'white',
                borderRadius: `${card_radius}rpx`,
            }
        },
        sLabelStyle() {
            return {
                color: this.data.info_title_color,
                fontSize: `${this.data.info_title_font}rpx`,
                marginRight: '30rpx',
                alignSelf: 'flex-start',
                fontWeight: '500',
            }
        },
        sValueStyle() {
            return {
                color: this.data.info_content_color,
                fontSize: `${this.data.info_content_font}rpx`,
            }
        },
        btnStyle() {
            let {
                customer_top,
                customer_left_right,
                customer_height,
            } = this.data;
            return {
                height: `${customer_height}rpx`,
                margin: `${customer_top}rpx ${customer_left_right}rpx 0`,
                background: 'linear-gradient(106deg, #FF7473 0%, #FF4544 100%)',
                borderRadius: '40rpx',
                color: 'white',
                fontSize: '32rpx',
            }
        },
    },
    data() {
        return {
            navHeight: 0,
            markers: [],
            data: {},
            mch_id: '',
            mchData: {},
            isKfShow: false,
            scrollTop: 0,
        }
    },
    onLoad(options) {
        this.$commonLoad.onload(options);
        this.mch_id = options.mch_id;
        this.loadData();
    },
    onPageScroll(e) {
        if ((e.scrollTop > 10 && this.scrollTop <= 10) || (e.scrollTop < 10 && this.scrollTop > 10)) {
            this.scrollTop = e.scrollTop;
        }
    },
    methods: {
        setHeight(navHeight){
            this.navHeight = navHeight;
        },
        callPhone() {
            uni.makePhoneCall({phoneNumber: this.mchData.mobile});
        },
        mapPower() {
            let {latitude, longitude, name, address} = this.mchData;
            uni.openLocation({
                latitude: parseFloat(latitude),
                longitude: parseFloat(longitude),
                name: name,
                address: address,
            });
        },
        loadData() {
            this.$showLoading({title: '加载中'});
            this.$request({
                url: this.$api.mch.store_reflection,
                data: {
                    mch_id: this.mch_id,
                }
            }).then(info => {
                this.$hideLoading();
                if (info.code === 0) {
                    this.data = info.data;
                    this.mchData = info.data.mch;
                    this.markers = [{
                        id: 0,
                        width: 152 / 2,
                        height: 108 / 2,
                        longitude: this.mchData.longitude,
                        latitude: this.mchData.latitude,
                        // #ifndef MP-ALIPAY
                        iconPath: "./../image/summary-map.png",
                        // #endif
                        // #ifdef MP-ALIPAY
                        iconPath: "/plugins/mch/image/summary-map.png",
                        // #endif
                    }];
                }
            }).catch(info => {
                this.$hideLoading();
            })
        },
    }
}
</script>

<style scoped lang="scss">
.summary {
    position: relative;
    height: 100%;

    .shop-pos {
        position: relative;
        z-index: 2;
        margin-bottom: 24#{rpx};

        .center > view {
            margin-bottom: 40#{rpx};
        }

        .summary-name {
            font-weight: 500;
            font-size: 40#{rpx};
            margin-bottom: 10#{rpx};
        }

        .summary-tag {
            font-size: 24#{rpx};
            color: #FF4544;
            padding: 4#{rpx} 14#{rpx};
            border-radius: 4#{rpx};
            border: 1px solid #FF4544;
            margin-right: 10#{rpx};
            margin-bottom: 10#{rpx};
        }

        .center {
            margin-top: 30#{rpx};
        }
    }

    .shop-style2 {
        padding: 24#{rpx};
        background: #FFFFFF;
        border-radius: 8#{rpx};
    }

    .shop-phone {
        margin-left: auto;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 48#{rpx};
        width: 48#{rpx};
        background-image: url("");
    }

    .map {
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 320#{rpx};
    }
}

</style>